<template>
  <div>
    <div class="main-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <span style="float: left; margin-right: 10px;">您目前的位置：</span>  
<el-breadcrumb-item  v-for = "(item,index) in breadlist" :key = 'index' :to="{path: item.path}">{{item.name}}
</el-breadcrumb-item>
<el-breadcrumb-item class="xq">详情</el-breadcrumb-item>
</el-breadcrumb>
      <div class="main-le fl det">
        <div class="home-column line">
          
        </div>
        <div class="list-col2">
          <div class="details">
            <div class="title">
              <h2>{{this.data.title}}</h2>
            </div>
            <!-- 来源：上海佛教网 -->
            <div class="info">时间:{{this.data.updateTime}}
            </div>
            <div v-html="this.data.description"></div>
          </div>
        </div>
      </div>
      <!-- <div class="main-ri fr">
        <div class="home-column">
          <span class="fr" @click="biaogeClick()">更多 &gt;&gt;</span>
          <el-tabs v-model="activeName">
            <el-tab-pane label="表格下载" name="first"></el-tab-pane>
          </el-tabs>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadlist: [],
      activeName: 'first',
      request: {
        id: this.$route.params.id
      },
      data: {},
      title: ''
    };
  },
  created() {
    this.init();
    this.getBread();
  },
  methods: {
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/detail`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            document.title = `上海佛教网--${response.data.data.title}`;
            if (response.data.data.articleSort === null) {
              this.title = '上海佛教';
            } else {
              this.title = response.data.data.articleSort.title;
            }
            this.data = response.data.data;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    // 表格下载
    biaogeClick() {
      let type = 68;
      this.$router.push({ path: `/pageList/${type}` });
    },
    getBread() {
      // this.breadlist = this.$route.matched;
      this.$route.matched.forEach((item, index) => {
        this.breadlist.push({
          name: item.name,
          path: item.path
        });
        // 先判断父级路由是否是空字符串或者meta是否为首页，直接复写路径到根路径
        item.name === '主页'
          ? (item.path = '/')
          : this.$route.path === item.path;
      });
      // if (this.$parent.activeIndex2 === '1') {
      // }
      if (this.$parent.activeIndex2 === '1') {
        // this.breadlist.splice(1, 0, {
        //   name: '新闻中心',
        //   path: '/newsCenter'
        // });
      }
      if (this.$parent.activeIndex2 === '2') {
        this.breadlist.splice(1, 0, {
          name: '本会介绍',
          path: '/introduce'
        });
      }
      if (this.$parent.activeIndex2 === '3') {
        this.breadlist.splice(1, 0, {
          name: '新闻中心',
          path: '/newsCenter'
        });
      }
      if (this.$parent.activeIndex2 === '4') {
        this.breadlist.splice(1, 0, {
          name: '政策法规',
          path: '/policies'
        });
      }
      if (this.$parent.activeIndex2 === '5') {
        this.breadlist.splice(1, 0, {
          name: '慈善公益',
          path: '/charity'
        });
      }
      if (this.$parent.activeIndex2 === '6') {
        this.breadlist.splice(1, 0, {
          name: '寺院场所',
          path: '/acquaintingPagoda'
        });
      }
    }
  },
  watch: {
    $route() {
      this.getBread();
    }
  },
  components: {}
};
</script> 

<style lang="less">
.el-breadcrumb__item:nth-last-child(2) {
  display: none;
}
.el-breadcrumb__separator[class*='icon'] {
  margin: 0 !important;
}
.det {
  width: 850px !important;
  .details {
    width: 850px !important;
  }
}
.line {
  margin-top: 15px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .main-le {
    width: 600px;
    .list-col2 {
      // padding-top: 20px;
      .details {
        width: 600px;
        height: auto;
        overflow: hidden;
        border-top: none !important;
        padding-bottom: 15px;
        .title {
          h2 {
            font-size: 24px;
            line-height: 24px;
            text-align: left;
            margin-top: 20px;
          }
        }
        .info {
          text-align: left;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        p {
          font-size: 14px;
          letter-spacing: 0.1em;
          line-height: 28px;
          text-indent: 0;
          padding: 10px;
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .lists {
      padding-top: 8px;
      li {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        position: relative;
        padding-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &::before {
          position: absolute;
          left: 0;
          top: 18px;
          content: '';
          width: 4px;
          height: 4px;
          background-color: #dd9b1e;
        }
      }
    }
  }
}
</style>